<template>
  <div class="table-container">
    <el-table
      v-loading="loading"
      :data="tableData"
      border
      stripe
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column prop="id" label="ID" width="80" />
      <el-table-column prop="year" label="年份" width="100" />
      <el-table-column prop="vepName" label="项目名称" min-width="150" />
      <el-table-column prop="vepCity" label="城市" min-width="120" />
      <el-table-column prop="vepDistrict" label="区县" min-width="120" />
      <el-table-column prop="vepTown" label="乡镇" min-width="120" />
      
      <!-- 核算结果 -->
      <el-table-column prop="vepResult" label="VEP核算总结果" min-width="140">
        <template #default="{ row }">
          {{ row.vepResult ? `${row.vepResult}万元` : '-' }}
        </template>
      </el-table-column>
      
      <!-- 服务类型结果 -->
      <el-table-column prop="provisioningServices" label="物质供给结果" min-width="140">
        <template #default="{ row }">
          {{ row.provisioningServices ? `${row.provisioningServices}万元` : '-' }}
        </template>
      </el-table-column>
      <el-table-column prop="regulatingServices" label="调节服务结果" min-width="140">
        <template #default="{ row }">
          {{ row.regulatingServices ? `${row.regulatingServices}万元` : '-' }}
        </template>
      </el-table-column>
      <el-table-column prop="culturalServices" label="文化服务结果" min-width="140">
        <template #default="{ row }">
          {{ row.culturalServices ? `${row.culturalServices}万元` : '-' }}
        </template>
      </el-table-column>
      
      <!-- 系统字段 -->
      <el-table-column prop="creator" label="创建者" min-width="100" />
      <el-table-column prop="created_at" label="创建时间" min-width="160">
        <template #default="{ row }">
          {{ formatDate(row.created_at) }}
        </template>
      </el-table-column>
      
      <!-- 操作列 -->
      <el-table-column label="操作" width="200" fixed="right">
        <template #default="{ row }">
          <el-button type="primary" size="small" @click="handleEdit(row)">
            <el-icon><Edit /></el-icon>
            编辑
          </el-button>
          <el-button type="danger" size="small" @click="handleDelete(row)">
            <el-icon><Delete /></el-icon>
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="pagination-container">
      <el-pagination
        v-model:current-page="pagination.page"
        v-model:page-size="pagination.per_page"
        :page-sizes="[10, 20, 50, 100]"
        :total="pagination.total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup>
import { Edit, Delete } from '@element-plus/icons-vue'

const props = defineProps({
  loading: {
    type: Boolean,
    default: false
  },
  tableData: {
    type: Array,
    default: () => []
  },
  pagination: {
    type: Object,
    default: () => ({
      page: 1,
      per_page: 10,
      total: 0
    })
  }
})

const emit = defineEmits(['selection-change', 'edit', 'delete', 'size-change', 'current-change'])

const handleSelectionChange = (selection) => {
  emit('selection-change', selection)
}

const handleEdit = (row) => {
  emit('edit', row)
}

const handleDelete = (row) => {
  emit('delete', row)
}

const handleSizeChange = (size) => {
  emit('size-change', size)
}

const handleCurrentChange = (page) => {
  emit('current-change', page)
}

const formatDate = (dateString) => {
  if (!dateString) return ''
  return new Date(dateString).toLocaleString('zh-CN')
}
</script>

<style scoped>
.table-container {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.pagination-container {
  padding: 20px;
  text-align: right;
  background: #fff;
}

:deep(.el-table) {
  border-radius: 0;
}

:deep(.el-table th) {
  background-color: #f5f7fa;
  color: #606266;
  font-weight: 600;
}

:deep(.el-pagination) {
  justify-content: flex-end;
}
</style> 